<template>
	<view class="create-group-box" :class="{'join-grpop':group_id}">
		<view class="header-box">
			<uni-search-bar v-model="keyword" :placeholder="$w('搜索')" bgColor="#fff" :radius="100"
				@cancel="doClear();isFocus = true" @clear="doClear" :isFocus="isFocus" @focus="isFocus = true"
				@blur="isFocus = false"></uni-search-bar>
		</view>
		<uni-list class="content-box">
			<uni-im-info-card @click="checkboxChange(item._id)" v-for="(item,index) in friendList" :key="index"
				:avatar-circle="true" :title="item.nickname" :border="false" :clickable="true"
				:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
				<template v-slot:left>
					<view class="checkbox">
						<uni-icons type="checkmarkempty" color="#007aff"
							v-if="checkFriendIds.includes(item._id)"></uni-icons>
					</view>
				</template>
			</uni-im-info-card>
			<uni-im-load-state :status="loading?'loading':(hasMore?'hasMore':'noMore')"
				:contentText='{"contentnomore": friendList.length?$w("没有更多好友"):$w("没有可以选择的好友")}'></uni-im-load-state>
			<uni-list-item style="height: 60px;" :border="false">
				<!-- 占位，用于此元素上方显示 操作按钮 -->
			</uni-list-item>
		</uni-list>
		<view class="foot-box">
			<!-- 创建新群可以不选择好友直接创建，邀请好友进群必须选择好友 -->
			<button :disabled="group_id? !checkFriendIds.length : false " class="btn" type="primary"
				@click="createGroup">{{btnText}}{{checkFriendNum}}</button>
		</view>
	</view>
</template>

<script>
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	const db = uniCloud.database();
	import i18nMixin from '../i18n/i18n-mixin.js'
	export default {
		mixins: [i18nMixin],
		data() {
			return {
				loading: true,
				hasMore: false,
				keyword: '',
				checkFriendIds: [],
				friendData: [],
				groupMemberUid: [], //选人进群时，已经在群里的人的id
				group_id: false,
				isFocus: false
			}
		},
		computed: {
			friendList() {
				return this.friendData.filter(item => {
					//转小写筛选
					return !this.groupMemberUid.includes(item._id) &&
						(this.keyword == '' || item.nickname.toLowerCase().includes(this.keyword.toLowerCase()))
				})
			},
			checkFriendNum() {
				return this.checkFriendIds.length > 0 ? '（' + this.checkFriendIds.length + '）' : ''
			},
			btnText() {
				return this.group_id ? this.$w('立即邀请') : this.$w('立即创建')
			},
			checkFriendsWidth() {
				return this.checkFriendIds.length > 6 ? '100%' : this.checkFriendIds.length * 80 + 'px'
			},
			// checkFriendsSearchWidth() {
			// 	return this.checkFriendIds.length > 6 ? '360' : 720 - (this.checkFriendIds.length * 60)
			// },
			translateXWidth() {
				return this.checkFriendIds.length > 6 ? this.checkFriendIds.length * 65 : '60'
			},
			checkFriendImg() {
				return this.friendList.reduce((sum, current) => {
					if (this.checkFriendIds.includes(current._id)) {
						sum.push(current)
					}
					return sum
				}, []).map(item => item.avatar_file)
			}
		},
		async onLoad(options) {
			this.setParam(options)
		},
		onReady(){
			uni.setNavigationBarTitle({
				title: this.$w('创建群聊')
			})
		},
		methods: {
			async setParam(options = {}) {
				console.log("group_id", options);
				if (options.group_id) {
					this.group_id = options.group_id
					
					//查本群，成员，
					let res = await db.collection('uni-im-group-member').where({
							group_id: options.group_id
						})
						.get()
					console.log("res:查本群，成员 ", res);
					this.groupMemberUid = res.result.data.map(item => item.user_id)
					console.log('this.groupMemberUid', this.groupMemberUid);
				}
				this.getFriendsData()
			},
			async getFriendsData() {
				let whereString = {}
				if (this.keyword) {
					whereString = `
          	"_id"		== 	"${this.keyword}" ||
          	"username"	== 	"${this.keyword}" || 
          	"nickname"	== 	"${this.keyword}" || 
          	"email"		== 	"${this.keyword}" || 
          	"mobile"	== 	"${this.keyword}" 
          `
				}
				let res = await db.collection(
					db.collection('uni-im-friend').where('"user_id" == $cloudEnv_uid').field(
						'friend_uid,mark,class_name')
					.getTemp(),
					db.collection('uni-id-users').where(whereString).field('_id,nickname,avatar_file').getTemp()
				).get()
				// console.log(res);
				let data = res.result.data
				data.forEach((item, index) => {
					if (item.friend_uid[0]) {
						data[index] = item.friend_uid[0]
					} else {
						delete data[index]
					}
				})
				this.friendData = data
				this.loading = false
				this.hasMore = this.friendList.length != 0
			},
			doClear() {
				this.keyword = ''
				this.getFriendsData()
			},
			checkboxChange(user_id) {
				console.log("checkboxChange-value", user_id);
				this.checkFriendIds = this.checkFriendIds.includes(user_id) ? this.checkFriendIds.filter(item => item !=
					user_id) : this.checkFriendIds.concat(user_id)
				console.log("checkboxChange", this.checkFriendIds);
			},
			async createGroup() {
				// console.log('创建', this.checkFriendIds.length)
				const uniImCo = uniCloud.importObject("uni-im-co")
				let res = await uniImCo.chooseUserIntoGroup({
					user_ids: this.checkFriendIds,
					group_id: this.group_id
				})
				this.checkFriendIds = []
				// console.log('createGroup',res);
				if (this.group_id) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					// #ifdef H5
					if (uniIm.isWidescreen) {
						uni.$emit('uni-im-toChat', 'group_' + res.data.group_id)
					} else {
						uni.redirectTo({
							url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data
								.group_id,
							animationDuration: 300,
							fail: (e) => {
								console.log(e);
							}
						})
					}
					// #endif

					// #ifndef H5
					uni.redirectTo({
						url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data
							.group_id,
						animationDuration: 300,
						complete: (e) => {
							console.log(e);
						}
					})
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni_modules/uni-im/common/baseStyle.scss";

	.create-group-box {
		position: relative;
		background-color: #F9F9F9;
		flex: 1;

		.header-box {
			flex-direction: column;
			background-color: #F9F9F9;
		}

		.content-box {
			width: 100%;
			overflow: auto;
		}

		.label-box {
			flex-direction: row;
			align-items: center;
			background-color: #FFF;
			padding: 5px 0;
		}

		.checkbox {
			margin: 12px 10px 0 0;
			border: 1px solid #DDD;
			width: 20px;
			height: 20px;
			justify-content: center;
			align-items: center;
			border-radius: 3px;
		}

		.foot-box {
			position: fixed;
			bottom: 0;
			// 注意：此页面可能显示在pc端所以不能用750rpx，而用100%
			width: 100%;
			height: 60px;
			justify-content: center;
			align-items: center;
		}

		.foot-box .btn {
			width: 300px;
		}

		/* #ifdef H5 */
		@media screen and (min-device-width:960px) {
			.create-group-box {
				width: 100%;
				margin: 10px auto;
			}

			&.join-grpop {
				width: 800px;
			}

			.content-box {
				height: calc(95vh - 200px);
			}

			.content-box ::v-deep .info-card {
				cursor: pointer;
			}

			.foot-box {
				position: absolute;
			}
		}

		/* #endif */
	}
</style>